<template>
  <view class="container">
    <view class="search-wrapper">
      <view class="search-input">
        <view class="search-input-wrapper">
          <view class="left">
            <text class="search-icon iconfont icon-search"></text>
          </view>
          <view class="right">
            <input
              v-model="searchValue"
              class="input"
              focus="true"
              placeholder="请输入姓名和电话号码"
              type="text"
            />
          </view>
        </view>
      </view>
      <view class="search-button">
        <button class="button" @click="onSearch" type="warn">搜索</button>
      </view>
    </view>

    <card-style
      @audit="auditClick"
      v-for="item in list"
      :key="item.order_no"
      :info="item"
    />

    <u-modal
      content="是否通过审核"
      v-model="show"
      ref="uModal"
      :asyncClose="true"
    >
      <view slot="confirm-button" style="margin-left: 20px; margin-right: 20px">
        <u-row justify="space-between" align="bottom" gutter="30">
          <u-col span="6">
            <u-button type="error" @click="handleAudit(2)">驳回</u-button>
          </u-col>
          <u-col span="6">
            <u-button type="success" @click="handleAudit(1)">通过</u-button>
          </u-col>
        </u-row>
      </view>

      <view
        style="
          display: flex;
          align-items: center;
          padding: 20px;
          justify-content: center;
          position: relative;
        "
        class="asdfljlashdkfhjasd"
      >
        <u-icon
          name="close"
          @click="show = false"
          style="position: absolute; top: -35px; right: 9px"
        ></u-icon>
        是否通过审核
      </view>
    </u-modal>
  </view>
</template>

<script>
import Empty from "@/components/empty";
import cardStyle from "@/components/card-style";
import * as RechargeReviewApi from "@/api/rechargeReview/index";

export default {
  components: {
    Empty,
    cardStyle,
  },
  data() {
    return {
      //当前页面参数
      options: {},
      // 正在加载
      isLoading: true,
      // 收货地址列表
      list: [],
      // 默认收货地址
      defaultId: null,
      show: false,
      //   当前被操作用户的信息
      currentInfo: {},
      searchValue: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 当前页面参数
    this.options = options;
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 获取页面数据
    this.getPageData();
  },

  methods: {
    // 获取页面数据
    getPageData() {
      const app = this;
      app.isLoading = true;
      Promise.all([app.getAddressList()])
        .then(() => {})
        .finally(() => (app.isLoading = false));
    },

    getAddressList() {
      const app = this;
      return new Promise((resolve, reject) => {
        RechargeReviewApi.list({ is_auth: 1, keyword: app.searchValue })
          .then((result) => {
            app.list = result.data.list.data;
            resolve(result);
          })
          .catch(reject);
      });
    },

    auditClick(info) {
      this.show = true;
      this.currentInfo = info;
    },
    // 通过审核
    handleAudit(status) {
      const app = this;
      RechargeReviewApi.audit(app.currentInfo.order_no, { status }).then(
        (result) => {
          app.show = false;
          // 刷新列表
          app.getPageData();
        }
      );
    },
    onSearch() {
      const { searchValue } = this;
      this.getPageData();
    },
  },
};
</script>

<style lang="scss" scoped>
.addres-list {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}

// 项目内容
.address-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

.contacts {
  font-size: 30rpx;
  margin-bottom: 16rpx;

  .name {
    margin-right: 16rpx;
  }
}

.address {
  font-size: 28rpx;

  .region {
    margin-right: 10rpx;
  }
}

.line {
  margin: 20rpx 0;
  border-bottom: 1rpx solid #f3f3f3;
}

.item-option {
  display: flex;
  justify-content: space-between;
  height: 48rpx;

  // 单选框
  .item-radio {
    font-size: 28rpx;

    .radio {
      vertical-align: middle;
      transform: scale(0.76);
    }

    .text {
      vertical-align: middle;
    }
  }

  // 操作
  .events {
    display: flex;
    align-items: center;
    line-height: 48rpx;

    .event-item {
      font-size: 28rpx;
      margin-right: 26rpx;
      color: #4c4c4c;

      &:last-child {
        margin-right: 0;
      }

      .title {
        margin-left: 8rpx;
      }
    }
  }
}

// 底部操作栏
.footer-fixed {
  position: fixed;
  bottom: var(--window-bottom);
  left: 0;
  right: 0;
  z-index: 11;
  box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
  background: #fff;

  // 设置ios刘海屏底部横线安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .btn-wrapper {
    height: 120rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 80rpx;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);
  }
}

.search-wrapper {
  display: flex;
  height: 64rpx;
  padding-left: 30rpx;
}

// 搜索输入框
.search-input {
  width: 80%;
  background: #fff;
  border-radius: 10rpx 0 0 10rpx;
  box-sizing: border-box;
  overflow: hidden;

  .search-input-wrapper {
    display: flex;

    .left {
      display: flex;
      width: 60rpx;
      justify-content: center;
      align-items: center;

      .search-icon {
        display: block;
        color: #b4b4b4;
        font-size: 28rpx;
      }
    }

    .right {
      flex: 1;

      input {
        font-size: 28rpx;
        height: 64rpx;
        display: flex;
        align-items: center;

        .input-placeholder {
          color: #aba9a9;
        }
      }
    }
  }
}

// 搜索按钮
.search-button {
  //   width: 20%;
  box-sizing: border-box;

  .button {
    height: 64rpx;
    font-size: 28rpx;
    border-radius: 0 5px 5px 0;
    background: #fa2209;
    display: flex;
    align-items: center;
  }
}
</style>
